<template>
	<view class="nav-bottom-bg">
		<view class="nav-top-bg">
			<u-navbar :isBack="isBack" title="设置密码" back-icon-color="#292940" :border-bottom="false" :background="bgColor" ></u-navbar>
		
		</view>
		<view class="container position-relative">
			<view class="item">
				<u-input :type="type" class="input-box pwd" :height="98" :password-icon="false" shape="circle" :border="false" clearable
					v-model.trim="param.password" placeholder="密码" placeholder-style="color:#C2C2C2">
				</u-input>
				<image src="../../static/login/eye.png" class="eye-img ml-1" mode="" @tap="isEye= false"
					v-show="isEye"></image>
				<image src="../../static/login/eyeClose.png" class="eye-img ml-1" mode="" @tap="isEye= true"
					v-show="!isEye"></image>
			</view>
			<view class="item">
				<u-input :type="type" class="input-box pwd" :height="98" :password-icon="false" shape="circle" :border="false" clearable
					v-model.trim="param.password_confirmation" placeholder="再次确认密码" placeholder-style="color:#C2C2C2">
				</u-input>
				<image src="../../static/login/eye.png" class="eye-img ml-1" mode="" @tap="isEyeOnce = false"
					v-show="isEyeOnce"></image>
				<image src="../../static/login/eyeClose.png" class="eye-img ml-1" mode="" @tap="isEyeOnce = true"
					v-show="!isEyeOnce"></image>
			</view>
			<u-button class="main-bg fz-36" hover-class="none" @tap="login">登录</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isBack:false,
				isEye:false,
				isEyeOnce:false,
				param: {
					password: '',
					password_confirmation:''
				},
				bgColor: { background:'rgba(255,255,255,1)' }
			}
		},
		onLoad(options) {
			if(options.hasOwnProperty('isSetting')){
				this.isBack = true
			}
		},
		computed: {
			type() {
				return !this.isEye ? 'password' : 'text'
			}
		},
		methods: {
			login() {
				if(this.param.password === ''){
					return uni.$u.toast('请输入密码')
				}
				if(this.param.password_confirmation === ''){
					return uni.$u.toast('请输入确认密码')
				}
				if(this.param.password != this.param.password_confirmation){
					return uni.$u.toast('两次密码不一致')
				}
				this.$store.dispatch('auth/updatePassword', this.param).then(res => {
					this.$store.dispatch('auth/user').then(res => {
						//如果账号没有设置昵称和头像则跳转完善信息页面
						if(!res.data.avatar){
							uni.reLaunch({
								url:'/pages/setting/perfectInfo'
							})
						}else{
							uni.redirectTo({
								url:'/pages/setting/account-security'
							})
						}
					})

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bottom-bg {
		width: 100%;
		height: 100vh;
	}
	.nav-top-bg{
		width: 100%;
	}

	.padding-200 {
		padding-top: 146upx;
		padding-bottom: 50upx;
	}

	.container {
		width: 690upx;
		margin: 0 auto;

		.item {
			width: 100%;
			margin-top: 40upx;
			position: relative;
			.input-box {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				text-align: left;
				background-color: #FAFBFC;
				border-radius: 49upx;
				padding: 0upx 30upx !important;
			}
			.get-code{
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				color: #292940;
			}
			.eye-img {
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				width: 36upx;
				height: 36upx;
			}
			.pwd{
				padding: 0 80upx 0 30upx !important;
			}
			.code{
				padding: 0 200upx 0 30upx !important;
			}
		}

		button {
			width: 100%;
			height: 98upx;
			border-radius: 50upx;
			line-height: 98upx;
			font-size: 32upx;
			color: #FFFFFF;
			margin-top: 60upx;
			margin-bottom: 60upx;
		}

		uni-button:after {
			border: none !important;
		}

		
	}
	.line{
		width: 1upx;
		background:rgba(224, 229, 233, .8);
		height: 29upx;
		margin:0 36upx;
	}
	.login-tips{
		position: fixed;
		bottom: 38upx;
	}
	.login-type{
		
		span:nth-of-type(1){
			width: 240upx;
			text-align: right;
		}
		span:nth-of-type(2){
			
			width: 240upx;
			text-align: left;
		}
	}
</style>
